<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .f_r{
            float:right;
        }
        .f_l{
            float:left;
        }
        .topbox{
            width: 1680px;
            height: 791px;
            background: url(images/dong.jpg);
            position: relative;
        }
        .box{
            width: 227px;
            position: absolute;
            cursor: pointer;
        }
        .box .top{
            background: url(images/tip1_h.gif) no-repeat;
            font-size: 14px;
            padding-top:45px;
            padding-left: 15px;
        }
        /*.box .top span{*/
            /*position: absolute;*/
            /*right:0px;*/
        /*}*/
        .box .center{
            background: url(images/tip1_c.gif);
            padding-top: 10px;
        }
        .center div{
            width: 200px;
            margin:0 auto;
            text-indent: 2em;
            font:14px "楷体";
        }
        .box .bottom{
            background: url(images/tip1_f.gif) no-repeat;
            height: 62px;
            padding-top:13px;
            font-size: 14px;
        }
        .box .bottom img{
            vertical-align: middle;
            float:left;
        }
        .box .bottom span{
            float:right;
            margin-right: 15px;
            margin-top: 10px;

        }
    </style>
</head>
<body>
    <div id="topbox" class="topbox">
        </div>
    </div>

    <script src="common.js"></script>
    <script>
        var mes = [
            {"id":1,"name":"Mr Li","content":"现在每次听歌都会很想你，真的想告诉你，我真的很爱你，心里面全都是你，我爱你老婆，我爱你，你是我的全部","time":"2016-03-27 19:03"},
            {"id":1,"name":"Mr Li","content":"心情好点了吗？520呢哦，，还不开心点","time":"2016-03-21 09:16"},
            {"id":2,"name":"Mr Li","content":"今天咱俩520天了哦，接下来还会有好多个520天，么么哒，爱你","time":"2016-03-21 09:15"},
            {"id":3,"name":"Mr Li","content":"今天咱俩500天了哦，接下来还会有好多个500天，么么哒，爱你","time":"2016-03-21 12:40"},
            {"id":4,"name":"Mr Li","content":"老婆，，永远永远爱你，，","time":"2016-02-08 12:02"},
            {"id":5,"name":"Miss Dong","content":"每天睡觉醒来都很想你，你有这感觉吗","time":"2016-12-02 15:56"},
            {"id":6,"name":"董小姐","content":"貌似是有了点进步，平时知道搭理我了，么么哒。","time":"2015-11-30 16:41"},
            {"id":7,"name":"董小姐","content":"玫瑰花超级喜欢，看着就高兴，但是太遭钱了。今天你比花好看多了，我更喜欢，么么哒。","time":"2015-11-29 18:29"},
            {"id":8,"name":"董美丽","content":"我喜欢你在我生气的时候你不知道点在哪都坚持哄我，即使我先惹你生气了。我也喜欢在我说疼的时候你立马就停了，那时候可暖呢，虽然有时候是装的吧。我还喜欢你特别稀罕我，怎么骂都骂不走。么么哒。","time":"2015-11-16 12:26"},
            {"id":9,"name":"董美丽","content":"又看了一遍日记，每次看都觉得心里暖暖的。不过我已经从因为你的一个吻睡不着，变到可以跟你讨论我是不是冷淡了，哎，你都把我教坏了。","time":"2015-11-16 12:26"},
            {"id":10,"name":"董美丽","content":"老婆，我的身心都在你这，永远陪着你，谁也抢不走，你只需要尽情享受我的温柔呵护，我爱你","time":"2015-3-3 19:58"},
            {"id":11,"name":"董丽茹","content":"之前咱俩貌似没啥关系，不过从现在到以后，想没关系都不行了，你跑不了了。。。","time":"2015-1-29 19:55"},
            {"id":12,"name":"董丽茹","content":"我一直是把爱情放到最后的人，但是和你好了之后我才渐渐发现，有时候爱情比友情更靠谱。我也越来越明白你对我的好，那是朋友不能给的，以后也要这样，一直不停的对我好。","time":"2015-1-1 12:56"},
        ];



        var topbox = my$("topbox");
        for(var i = 0; i < mes.length; i++) {
            var div = document.createElement("div");
            div.className = "box";
            topbox.appendChild(div);
            var ran = Math.random() * 1000;
            var ran1 = Math.random() * 500;
            div.style.left = ran+"px";
            div.style.top = ran1+"px";
            var str = [];
            var str = '<div class="top" id="top">第[' + mes[i].id +']条 ' + mes[i].time +'<span id="close">×</span></div>' +
                    '<div class="center">' + '<div>' + mes[i].content + '</div></div>' +
                    '<div class="bottom">' +
                    '<img class="f_l" src="images/bpic_1.gif" alt=""/>' +
                    '<span>' + mes[i].name + '</span>' +
                    '</div>';
            div.innerHTML = str;

            //纸条点击置于最高层的时间注册
            var zindex = 0;
            div.onclick = function () {
                this.style.zIndex = ++zindex;
            }
////            //关闭按钮的时间注册
            div.ondblclick = function () {
                console.log("b");
                topbox.removeChild(this);
            }



            //添加拖拽的事件
            div.onmousedown = function(ell) {
                //记录下当前事件的对象，以供给onmousemove用
                var obj = this;
                var x = eventTools.getPageX(ell) - obj.offsetLeft;
                console.log(obj.offsetLeft);
                console.log(obj.style.left);
                var y = eventTools.getPageY(ell) - obj.offsetTop;
                console.log(this);
                document.onmousemove = function (el) {
                    obj.style.left = eventTools.getPageX(el) - x + "px";
                    obj.style.top = eventTools.getPageY(el) - y + "px";

                    //取消文本的选择
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                };

            };
            document.onmouseup = function() {
                document.onmousemove = null;
            };
        }

        


    </script>
</body>
</html>